import { useSelector, useDispatch } from "react-redux";
import { increment, asyncincrement } from "../store/features/counterSlice";

const Counter = () => {
    const dispatch = useDispatch();
    const count = useSelector((state) => state.counter.count);
    return (
        <>
            <div className='alert alert-danger'>当前数值为：{count}</div>
            <div className='btn-group'>
                <div
                    className='btn btn-default'
                    onClick={() => dispatch(increment(2))}
                >
                    同步增加
                </div>
                <div
                    className='btn btn-danger'
                    onClick={() => dispatch(asyncincrement(1))}
                >
                    异步增加
                </div>
            </div>
        </>
    );
};

export default Counter;
